<template>
    <div>
        <section class="embroidery-meets-dtg" :style="{ '--step1-count': beforeRate, '--step2-count': step2 }">
            <div class="embroidery-meets-dtg-container" :style="renderStyle">
                <div class="embroidery-meets-dtg-describe">
                    <h2>
                        Embroidery Meets DTG<br />for<br />Infinite Design Possibilities
                    </h2>
                    <p>
                        PODpartner pioneers the combination of <strong>embroidery and DTG</strong>, opening up a world
                        of
                        possibilities for custom clothing creation. This innovation empowers you to unleash your
                        creativity and create unique clothing that makes your brand stand out.
                    </p>
                </div>
                <div class="embroidery-meets-dtg-preview">
                    <figure>
                        <img :src="$getImageWebPByUrl('https://img.podpartner.com/static/images-20240628/meets-1.jpg')"
                            alt="">
                        <img :src="$getImageWebPByUrl('https://img.podpartner.com/static/images-20240628/meets-1-hover.jpg')"
                            alt="">
                    </figure>
                    <figure>
                        <img :src="$getImageWebPByUrl('https://img.podpartner.com/static/images-20240628/meets-2.jpg')"
                            alt="">
                        <img :src="$getImageWebPByUrl('https://img.podpartner.com/static/images-20240628/meets-2-hover.jpg')"
                            alt="">
                    </figure>
                    <figure>
                        <img :src="$getImageWebPByUrl('https://img.podpartner.com/static/images-20240628/meets-3.jpg')"
                            alt="">
                        <img :src="$getImageWebPByUrl('https://img.podpartner.com/static/images-20240628/meets-3-hover.jpg')"
                            alt="">

                    </figure>
                    <figure>
                        <img :src="$getImageWebPByUrl('https://img.podpartner.com/static/images-20240628/meets-4.jpg')"
                            alt="">
                        <img :src="$getImageWebPByUrl('https://img.podpartner.com/static/images-20240628/meets-4-hover.jpg')"
                            alt="">

                    </figure>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
export default {
    props: {
        screen_height: {
            type: Number,
            default: 0
        },
        scroll: {
            type: Number,
            default: 0
        },
        cur_scroll: {
            type: Number,
            default: 0
        },
        rate: {
            type: Number,
            default: 0
        },
        range: {
            type: Number,
            default: 0
        },
    },
    data () {
        return {
        }
    },
    computed: {
        renderStyle () {
            const style = {}
            if (this.scroll) {
                if (this.scroll < (this.range - this.screen_height)) {
                    Object.assign(style, {
                        position: 'fixed',
                        top: '78px',
                    })
                } else {
                    Object.assign(style, {
                        position: 'absolute',
                        bottom: `0`,
                    })
                }
            }
            return style
        },
        // 需要一个提前200px开始,然后到内容区域1屏的rate
        beforeRate () {
            const diff = 200;
            const before_scroll = Math.max((this.cur_scroll - this.screen_height) + diff, 0); // 触发阈值的滚动值
            const rate = this.$clamp(0, before_scroll / (this.screen_height * 0.5), 1)
            return rate
        },
        step1 () {
            return Math.max(0, Math.min(Number(this.scroll / (this.screen_height * 0.5)), 1))
        },
        step2 () {
            // 执行 0.3 文字推送,0.7向上滚动 1 / 0.7
            if (this.scroll <= this.screen_height * 0.5) return 0;
            return Math.max(0, Math.min(Number((this.scroll - this.screen_height * 0.5)) / this.screen_height * 0.5, 1))
        },
    },
    methods: {}
}
</script>
<style scoped lang="scss">
.embroidery-meets-dtg {
    position: relative;
    height: calc(var(--screen-height) * 4);

    .embroidery-meets-dtg-container {
        z-index: auto;
        position: static;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: var(--screen-height);

        animation: none;
        animation-iteration-count: var(--trans-rate);

        .embroidery-meets-dtg-describe {
            @keyframes describe-trans {
                0% {
                    transform: translate3d(0, 0, 0);

                }

                100% {
                    transform: translate3d(0, calc(-50vh - 540px), 0);
                }
            }

            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;

            transform: translate3d(0, 0, 0);
            animation: describe-trans 0s linear forwards;
            animation-iteration-count: clamp(0,
                calc((var(--step2-count) - 0.3) / 0.7),
                1);

            h2 {
                @keyframes text-scale {
                    0% {
                        transform: scale(25) translate3d(0, -5px, 0);
                        opacity: 0;
                    }

                    40% {
                        transform: scale(10) translate3d(0, -5px, 0);
                    }

                    100% {
                        transform: scale(1) translate3d(0, -5px, 0);
                        opacity: 1;
                    }
                }

                position: absolute;
                width: 875px;
                height: 264px;
                text-align: center;
                font-family: Roboto-Medium,
                Roboto;
                font-weight: 500;
                font-size: 60px;
                color: #000000;
                line-height: 88px;
                background: linear-gradient(135deg, #E53BAC 0%, #EDB002 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                transform: scale(25) translate3d(0, -5px, 0);
                opacity: 0;
                animation: text-scale 0ms linear forwards;
                animation-iteration-count: var(--step1-count);
            }

            p {
                @keyframes step2-text-trans {
                    0% {
                        transform: translate3d(0, var(--screen-height), 0);
                    }

                    100% {
                        transform: translate3d(0, 250px, 0);
                    }
                }

                box-sizing: border-box;
                padding: 0 14px;
                transform: translate3d(0, 300px, 0);
                width: 100%;
                max-width: 1220px;
                text-align: center;
                font-family: Roboto-Regular,
                Roboto;
                font-weight: 400;
                font-size: 28px;
                color: #000000;
                line-height: 56px;



                animation: step2-text-trans 0s linear forwards;
                animation-iteration-count: clamp(0,
                    calc(var(--step2-count) / 0.3),
                    1);

                strong {
                    background: linear-gradient(135deg, #E53BAC 0%, #EDB002 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
        }
    }

    .embroidery-meets-dtg-preview {
        position: absolute;
        width: 100vw;
        height: var(--screen-height);
        display: flex;
        flex-flow: row wrap;

        figure {

            @keyframes preview-show {
                0% {
                    opacity: 0;
                    pointer-events: none;
                }

                18% {
                    opacity: 0;
                    pointer-events: all;
                }

                80% {
                    opacity: 1;
                    pointer-events: all;
                }

                100% {
                    pointer-events: all;
                    opacity: 1;
                }
            }

            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50vw;
            height: 50%;
            overflow: hidden;
            pointer-events: none;
            opacity: 0;

            animation: preview-show 0s linear forwards;
            animation-iteration-count: clamp(0,
                calc((var(--step2-count) - 0.3) / 0.7),
                1);

            img {
                position: absolute;
                transition: all 0.3s;
                object-fit: cover;
                width: 100%;
                height: 100%;

                &:last-child {
                    opacity: 0;
                }
            }
        }

        figure:hover {
            z-index: 1;
            box-shadow: 0px 0px 70px 0px rgba(0, 0, 0, 0.25);

            img {
                &:last-child {
                    opacity: 1;
                }
            }
        }

    }

}

.animation-none {
    .embroidery-meets-dtg {
        height: auto;

        .embroidery-meets-dtg-container {
            z-index: auto;
            position: static;
            left: auto;
            top: auto;
            transform: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: auto;
            animation: none;

            .embroidery-meets-dtg-describe {
                padding: 32px 14px 80px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                pointer-events: none;

                transform: none;
                animation: none;

                h2 {
                    position: static;
                    width: 100%;
                    height: auto;
                    font-size: 24px;
                    line-height: 28px;
                    transform: none;
                    opacity: 1;
                    animation: none;
                    margin-bottom: 18px;
                }

                p {
                    transform: none;
                    width: auto;
                    font-size: 14px;
                    line-height: 24px;
                    animation: none;
                }
            }
        }

        .embroidery-meets-dtg-preview {
            position: static;
            width: 100%;
            height: auto;
            display: flex;
            flex-flow: row wrap;

            figure {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: auto;
                overflow: hidden;
                opacity: 1;

                animation: none;

                img {
                    position: static;
                    transition: all 0.3s;
                    object-fit: cover;
                    width: 100%;
                    height: auto;

                    &:last-child {
                        display: none;
                    }
                }
            }

            figure:hover {
                img {
                    &:last-child {
                        display: none;
                    }
                }
            }

        }

    }
}
</style>